<template>
    <div class="header">
        <div class="header-wrap">
            <h2 class="web-font">我的</h2>
            <ul class="header-list">
                <li><router-link to="/"><span class="iconfont">&#xe509;</span>首页</router-link></li>
                <li><router-link to="/auth/register"><span class="iconfont icon-zhuce"></span>注册</router-link></li>
                <li><router-link to="/auth/login"><span class="iconfont">&#xe653;</span>登录</router-link></li>
            </ul>
            <div class="navbar" @click="show" ref="navbar">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            toggle:false
        }
    },
    methods:{
        show(){
            let child=this.$refs.navbar.children
            if(!this.toggle){
                child[0].style.cssText="transform:rotate(45deg) translate(6px,9px)"
                child[1].style.cssText="opacity:0"
                child[2].style.cssText="transform:rotate(-45deg) translate(2px,-5px)"
            }else{
                child[0].style.cssText="transform:rotate(0) translateY(0%)"
                child[1].style.cssText="opacity:1"
                child[2].style.cssText="transform:rotate(0) translateY(0%)"
            }
            this.toggle=!this.toggle
            this.$emit("changeShow",this.toggle)
            console.log(this.toggle)
        }
    }
}
</script>

<style lang="less" scoped>
.header{
    position: sticky;
    z-index: 999;
    top:0;
    width:100%;
    height:70px;
    padding-top:1px;
    @media screen and (max-width: 800px) {
        .navbar{
            opacity: 1 !important;
        }
        .header-list{
            display: none;
        }
        .web-font{
            display: none;
        }
    }
    .header-wrap{
        position: relative;
        width:90%;
        height: 100%;
        margin:0 auto;
        line-height:70px;
        .navbar{
            display:flex;
            flex-direction: column;
            justify-content: space-around;
            width:24px;
            height:24px;
            opacity: 0;
            margin:10px auto;
            span{
                display: block;
                width: 100%;
                height:3px;
                background-color:white;
            }
            span:nth-child(1),span:nth-child(3){
                transition:.5s;
            }
            span:nth-child(2){
                transition:1.3s;
            }
        }
        .web-font{
            float:left;
            font-family: "FangSong";
            margin-left:30px;
            color:white;
            animation: webfont 1s;
            font-size: 25px;
        }
        @keyframes webfont {
            0%{
                transform:translate(15px,-5px)
            }
            25%{
                transform:translate(-12px,-5px)
            }
            50%{
                transform:translate(7px,-2px)
            }
            100%{
                transform:translate(0,0)
            }
        }
        .header-list{
            float:right;
            li{
                float:left;
                width:100px;
                height: 50px;
                margin-top:10px;
                line-height: 50px;
                text-align: center;
                margin-right:70px;
                color:white;
                border-radius:5px;
                &:hover{
                    background-color:rgba(255, 255, 255,.1);
                    cursor: pointer;
                }
                a{
                    font-size:12px;
                    color:white
                }
                span{
                    margin-right:10px;
                }
            }
        }
    }
}
</style>